<template>
  <div>
    <div ref="mychart" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    var xAxisData = [];
    var data1 = [];
    var data2 = [];
    for (var i = 0; i < 100; i++) {
      xAxisData.push("A" + i);
      data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
      data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
    }
    return {
      arr: {
        title: {
          text: "Bar Animation Delay",
        },
        legend: {
          data: ["bar", "bar2"],
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ["stack"],
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2,
            },
          },
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false,
          },
        },
        yAxis: {},
        series: [
          {
            name: "bar",
            type: "bar",
            data: data1,
            emphasis: {
              focus: "series",
            },
            animationDelay: function (idx) {
              return idx * 10;
            },
          },
          {
            name: "bar2",
            type: "bar",
            data: data2,
            emphasis: {
              focus: "series",
            },
            animationDelay: function (idx) {
              return idx * 10 + 100;
            },
          },
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function (idx) {
          return idx * 5;
        },
      },
    };
  },
  mounted() {
    this.getlist();
    window.addEventListener("resize", this.mychart.resize);
  },
  methods: {
    getlist() {
      //1.获取dom
      const chartDom = this.$refs.mychart;
      //2.初始化
      this.mychart = echarts.init(chartDom);

      //   配置图表数据
      const option = this.arr;

      //4.渲染生成图表
      this.mychart.setOption(option);
    },
  },
};
</script>
